<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="Guo Yinxin">

	<link rel="shortcut icon" href="icons/monitor.ico">

	<!-- 框架CSS -->
	<link href="css/flat-ui.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">

	<title>海洋观测系统运行状态监控</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Slider bar hover color set -->
	<link href="css/bootstrap.css" rel="stylesheet">

	<!-- Dashboard CSS -->
	<link href="css/dashboard.css" rel="stylesheet">

	<!-- Kendo UI CSS-->
	<link href="css/kendo.dataviz.default.min.css" rel="stylesheet">
	<link href="css/kendo.dataviz.min.css" rel="stylesheet">
	<link href="css/kendo.common.min.css" rel="stylesheet">
	<!--<link href="css/kendo.default.min.css" rel="stylesheet">-->
	<!--<link href="style/kendo.common.min.css" rel="stylesheet">-->
	<link href="style/kendo.default.min.css" rel="stylesheet">

	<!-- Modal -->
	<link href="css/bootstrap-modal.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">

	<!-- Modal CSS -->
	<style type="text/css">
		body.modal-open,
		.modal-open .navbar-fixed-top,
		.modal-open .navbar-fixed-bottom
		{
			margin-right: 0;
		}
		.modal
		{
			left: 50%;
			bottom: auto;
			right: auto;
			padding: 0;
			width: 500px;
			margin-left: -250px;
			background-color: #ffffff;
			border: 1px solid #999999;
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-radius: 6px;
			-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			background-clip: padding-box;
		}
		.modal.container
		{
			max-width: none;
		}
	</style>

	<style type="text/css">
		.btn-circle
		{
			width: 30px;
			height: 30px;
			text-align: center;
			padding: 6px 0;
			font-size: 12px;
			line-height: 1.428571429;
			border-radius: 15px;
			/*background-color:#0000ff;*/
		}
	</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid" style="background-color:#0A64A4">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="brand" href="index.html" style="padding-left:20px">
				<img alt="监控icon" src="icons/monitor_48.png">
				<span style="font-size:26px;color:#ffffff;vertical-align:middle">海洋观测系统运行状态监控</span>
			</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<!--<li><a id="setting" href="#responsive" data-toggle="modal"><span class="icon-cogs"></span>&nbsp;设置</a></li>-->
				<li><a id="message" href="#responsive" data-toggle="modal"><span class="icon-envelope"></span>&nbsp;消息</a></li>
				<li><a id="about" href="#responsive" data-toggle="modal"><span class="icon-question-sign"></span>&nbsp;关于</a>
				</li>
				<li class="dropdown">
					<a href="#user" class="dropdown-toggle" data-toggle="dropdown">
						<span class="icon-user"></span>
						<span id="loginName">&nbsp;用户</span>
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a id="account" href="#responsive" data-toggle="modal"><i class="icon-user"></i>&nbsp;账户</a></li>
						<li class="divider"></li>
						<li><a href="login.html" onclick="logout()"><i class="icon-off"></i>&nbsp;退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 sidebar" style="background-color:#2E3538;font-family:'微软雅黑'">
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="index.html">
						<span class="icon-dashboard icon-2x" style="color:#dfdfdf;"></span>
						<span style="font-size:18px; color:#dfdfdf;">仪表盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="file.html">
						<span class="icon-file-text icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;文件</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="server.html">
						<span class="icon-tasks icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">服务器</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li class="active">
					<span class="glow"></span>
					<a href="cpu.html">
						<span class="icon-circle-blank icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;CPU</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="memory.html">
						<span class="icon-ticket icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">内存</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="disk.html">
						<span class="icon-hdd icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;磁盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="network.html">
						<span class="icon-globe icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;网络</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="database.html">
						<span class="icon-calendar icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">数据库</span>
					</a>
				</li>
			</ul>
		</div>

		<div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 col-lg-11 col-lg-offset-1 main">
			<ul class="breadcrumb">
				<li><a href="index.html">首页</a>
				</li>
				<li class="active"> CPU
				</li>
			</ul>
			<div class="placeholders" id="cpuRow">
			</div>
		</div>
		<hr>
		<footer class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:20px">
			<p style="text-align:center">Copyright © 2014 ShangHai Ocean University * Institute For Digital Ocean . All
				Rights Reserved.</p>
		</footer>
	</div>
</div>

<!-- Modal Definitions (tabbed over for <pre>) -->
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 id="responsiveTitle" class="modal-title" style="text-align:center;font-weight:bold;"></h4>
	</div>
	<div class="modal-body">
		<div class="row">
			<div id="responsiveBody">// class="col-md-offset-1 col-md-10">

			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
		<!--<button type="button" class="btn btn-primary">Save changes</button>-->
	</div>
</div>


<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Modal JS -->
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>

<!-- Kendo UI -->
<script src="js/kendo.dataviz.min.js"></script>
<script src="js/kendo.all.min.js"></script>


<script>
	//全局变量声明
	//Server URL
	//    var serverURL = "http://192.168.182.48:8080/api/sql?sql=";
	var serverURL = "http://202.121.66.51:8083/api/sql?sql=";
	//ServerInfo
	var serverCPUInfo;
	//LoopTime
	var loopTime = 5000;
	//DataLimitNumber
	var dataLimitNum = 200;
	//ChartAxisInterval
	var steps = 10;
	//ChartHeight
	var chartHeight = 250;

	//Responsive <a> 的点击监听事件
	$('a').click(function (e)
	{
		var title = document.getElementById("responsiveTitle");
		var body = document.getElementById("responsiveBody");
		while (body.childNodes.length)
		{
			body.removeChild(body.firstChild);
		}
		console.log(e.target.id);
		body.className = "col-md-offset-1 col-md-10";
//        var resp = document.getElementById("responsive");
//        resp.dataset.width = "760";
//        console.log("target ID:"+e.target.id+"  "+ e.currentTarget);
		switch (e.target.id)
		{
			case "about":
				title.innerText = "关于“海洋观测系统运行状态监控”";
				bodyAbout(body);
				break;
			case "message":
				title.innerText = "消息";
				bodyMessage(body);
				break;
			case "setting":
				title.innerText = "设置";
				bodySetting(body);
				break;
			case "account":
				title.innerText = "账户信息";
				bodyAccount(body);
				break;
			default :
				title.innerText = "Responsive Title";
		}
	});
	// About Body function
	function bodyAbout(fatherDiv)
	{
		var h4 = document.createElement("h4");
		h4.innerText = "介绍：";
		fatherDiv.appendChild(h4);
		var para = document.createElement("p");
		para.innerText = "海洋观测系统运行状态监控是海洋公益性行业科研专项项目“海洋观测系统运行状态监控技术研究与示范”的子项目之一。" +
				"        该系统由国家海洋局东海分局信息中心与上海海洋大学合作研究开发，研发成员有：郭颖新，季丽伟，韦躐晟等。";
		fatherDiv.appendChild(para);
	}
	// Message Body function
	function bodyMessage(fatherDiv)
	{
		var messageDiv = document.createElement("div");
		messageDiv.id = "messageDiv";
		fatherDiv.className = "col-md-12";
		fatherDiv.appendChild(messageDiv);

		var messageInfoSql = "select * from messageInfo group by ID desc limit 200";
		var messageUrl = serverURL + messageInfoSql;
		$.ajax({
			url: messageUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				for (var i in req)
				{
					req[i].DateTime = req[i].DateTime.replace("T", " ");
				}
				$("#messageDiv").kendoGrid({
					dataSource: {
						data: req,
						pageSize: 10
					},
					pageable: {
						refresh: true,
						pageSizes: true,
						buttonCount: 5
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "ID",
						title: "ID",
						width: 10
					}, {
						field: "ServerID",
						title: "Server",
						width: 20
					}, {
						field: "Aspect",
						title: "方面",
						width: 30
					}, {
						field: "Content",
						title: "内容",
						width: 80
					}, {
						field: "DateTime",
						title: "时间",
						width: 45
					}]
				});
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Setting Body function
	function bodySetting(fatherDiv)
	{

	}
	// Account Body function
	function bodyAccount(fatherDiv)
	{
		var userCount = document.createElement("div");
		userCount.id = "userCount";
		fatherDiv.appendChild(userCount);

		var userInfoSql = "select * from user where UserName=\"" + getCookie("loginUser") + "\"";
		var userUrl = serverURL + userInfoSql;
		$.ajax({
			url: userUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				$("#userCount").kendoGrid({
					dataSource: {
						data: req
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "UserName",
						title: "用户名",
						width: 50
					}, {
						field: "Passwords",
						title: "密码",
						width: 50
					}, {
						field: "Level",
						title: "权限等级",
						width: 40
					}, {
						field: "RegistTime",
						title: "注册时间",
						width: 80
					}, {
						field: "ID",
						title: "ID",
						width: 20
					}]
				});
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}

	//创建LineChart
	function createLineChart(cpuLineID, dataSource)
	{
		var lineChartName = "#" + cpuLineID;
		$(lineChartName).kendoChart({
			dataSource: {
				data: dataSource
			},
			title: {
				text: "Server的CPU平均使用率"
			},
			legend: {
				visible: false
			},
			chartArea: {
				height: chartHeight
			},
			transitions: false,
			seriesDefaults: {
				type: "area",
				color: "#0000ff"
			},
			series: [{
				field: "UsedValue",
				name: "CPU",
				categoryField: "DataTime"
			}],
			valueAxis: {
				min: 0,
				max: 100,
				labels: {
					format: "{0}%"
				},
				line: {
					visible: true
				}
			},
			categoryAxis: {
				field: "DataTime",
//                majorGridLines: {
//                    visible: false
//                },
//                baseUnitStep: "auto",
//                autoBaseUnitSteps: {
//                    minutes: [3]
//                },

				type: "date",
//                baseUnit:"minutes",
				labels: {
					step: steps,
//                    rotation:-30,
////                    format:{0}
					dateFormats: {
//                        minutes:"M-d"
					}
				},
				baseUnit: "minutes",
//                baseUnitStep:steps
				justified: false
			},
			tooltip: {
				visible: true,
//                shared: true,
				format: "{0}%",
				template: "#= category # - #= value #%"
			}
		});
	}

	//创建Gauge
	function createGauge(gaugeID, dataSource)
	{
		var gaugeName = "#" + gaugeID;
		$(gaugeName).height(200);
		$(gaugeName).kendoRadialGauge({
			pointer: {
				value: dataSource
			},
			scale: {
				minorUnit: 5,
				startAngle: -30,
				endAngle: 210,
				max: 100,
				labels: {
					position: "inside",
					template: "#= value #%"
				},
				ranges: [
					{
						from: 20,
						to: 50,
						color: "#ffc700"
					}, {
						from: 50,
						to: 80,
						color: "#ff7a00"
					}, {
						from: 80,
						to: 100,
						color: "#c20000"
					}
				]
			}
		});

	}
	//初始化LineChart
	function initChartAndGauge(serverID)
	{
		var cpuDataSql = "select ID,DataTime,UsedValue from CPUAvgINFO where serverid=" + serverID + " order by id desc limit " + dataLimitNum;
		var initDataUrl = serverURL + cpuDataSql;
		var ajInitData = $.ajax({
			url: initDataUrl,
			type: 'get',
			dataType: 'json',
			success: function (data)
			{
				if (data.length > 0)
				{
					var panel0 = document.createElement("div");
					panel0.className = "panel panel-primary";
					var panelHead = document.createElement("div");
					panelHead.className = "panel-heading";
					panelHead.innerText = "Server" + serverID + " CPU平均使用率";
					var panelBody = document.createElement("div");
					panelBody.className = "panel-body";
					panel0.appendChild(panelHead);
					panel0.appendChild(panelBody);

					var divLine = document.createElement("div");
					divLine.className = "col-sm-8 col-md-8 col-lg-8 placeholder";
					divLine.id = "lineChartServer" + serverID;

					var divGauge = document.createElement("div");
					divGauge.className = "col-sm-4 col-md-4 col-lg-4 placeholder";
					divGauge.id = "gaugeServer" + serverID;

					var labelValue = document.createElement("div");
					labelValue.style.textAlign = "center";
					labelValue.id = "valueServer" + serverID;
					labelValue.innerText = "Value:" + data[0].UsedValue + "%";

					var labelTime = document.createElement("div");
					labelTime.style.textAlign = "center";
					labelTime.id = "timeServer" + serverID;
					labelTime.innerText = data[0].DataTime.substr(0, 4) + "/" + data[0].DataTime.substr(5, 2) + "/" + data[0].DataTime.substr(8, 2)
							+ " " + data[0].DataTime.substr(11, 8);
					panelBody.appendChild(divLine);
					panelBody.appendChild(divGauge);
					panelBody.appendChild(labelValue);
					panelBody.appendChild(labelTime);

					var element = document.getElementById("cpuRow");
					element.appendChild(panel0);

					createGauge(divGauge.id, data[0].UsedValue);

					data.reverse();//"DataTime": "2014-04-22T09:14:46",
					for (var i in data)
					{
//                        data[i].DataTime =data[i].DataTime.substr(0,4)+"/"+data[i].DataTime.substr(5,2)+"/"+data[i].DataTime.substr(8,2) + " "+ data[i].DataTime.substr(11,8);
//                        data[i].DataTime =data[i].DataTime.substr(11,8);
						data[i].DataTime = data[i].DataTime.replace("T", " ");
//                        console.log("DataTime: "+data[i].DataTime);
					}
					createLineChart(divLine.id, data);
				}
			},
			error: function ()
			{
				alert("数据获取失败，请检查网络！");
			}
		});
	}

	//更新LineChart Gauge Data
	function updateData(serverID)
	{
		var cpuDataSql = "select ID,DataTime,UsedValue from CPUAvgINFO where serverid=" + serverID + " order by id desc limit 1";
		var updateCPUDataUrl = serverURL + cpuDataSql;
		var updateChartID = "#lineChartServer" + serverID;
		var updateGaugeID = "#gaugeServer" + serverID;
		var updateValueID = "valueServer" + serverID;
		var updateTimeID = "timeServer" + serverID;
		$.ajax({
			url: updateCPUDataUrl,
			type: 'get',
			dataType: 'json',
			success: function (data)
			{
				if ((data.length > 0) && ($(updateChartID).data("kendoChart").dataSource.at(dataLimitNum - 1).ID != data[0].ID))
				{
					//Refresh Gauge Value
					var newValue = data[0].UsedValue;
					$(updateGaugeID).data("kendoRadialGauge").value(newValue);
					var valuePer = document.getElementById(updateValueID);
					valuePer.innerText = "Value:" + newValue + "%";
					var newTime = document.getElementById(updateTimeID);
					newTime.innerText = data[0].DataTime.substr(0, 4) + "/" + data[0].DataTime.substr(5, 2) + "/" + data[0].DataTime.substr(8, 2)
							+ " " + data[0].DataTime.substr(11, 8);
					//Refresh Line Chart Data
					var chart0 = $(updateChartID).data("kendoChart");
					var firstData = chart0.dataSource.at(0);
					chart0.dataSource.remove(firstData);
//                    data[0].DataTime =data[0].DataTime.substr(11,8);
					data[0].DataTime = data[0].DataTime.replace("T", " ");
					chart0.dataSource.add(data[0]);
				}
			},
			error: function ()
			{
				alert("数据获取失败，请检查网络！");
			}
		});
	}

	//定时更新
	function loopData()
	{
		for (var i in serverCPUInfo)
		{
			updateData(serverCPUInfo[i].ServerID);
		}
		setTimeout("loopData()", loopTime);
	}

	// Get Cookie Function
	function getCookie(key)
	{
		var arr = document.cookie.match(new RegExp("(^|)" + key + "=([^;]*)(;|$)"));
		if (arr != null)
		{
			return unescape(arr[2]);
		}
		return null;
	}

	// Delete Cookie
	function deleteCookie(key)
	{
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cVal = getCookie(key);
		if (cVal != null)
		{
			document.cookie = key + "=" + cVal + ";expires=" + exp.toGMTString();
		}
	}
	// Logout function
	function logout()
	{
		deleteCookie("loginUser");
	}

	//Script Ready Function
	$(document).ready(function ()
	{
		if (!getCookie("loginUser"))
		{
			window.location = "login.html";
		}
		else
		{
			//Init username from cookie
			document.getElementById("loginName").innerText = " " + getCookie("loginUser");

			var serverInfoSql = "select ServerID from server";
			var serverInfoURL = serverURL + serverInfoSql;
			$.ajax({
				url: serverInfoURL,
				type: 'get',
				dataType: 'json',
				success: function (data)
				{
					serverCPUInfo = data;
					for (var i in data)
					{
						initChartAndGauge(data[i].ServerID);
					}
					loopData();
				},
				error: function ()
				{
					alert("数据获取失败，请检查网络！");
				}
			});
		}
	});

</script>

</body>
</html>

